<template>
	<view class="settle">





		<u-cell-group class="mt-20">
			<u-cell-item title="姓名" :value="accountData.accountName" bg-color="#fffffF" :arrow="false"></u-cell-item>
			<view class="" v-if="accountData.accountIdCard">
				<u-cell-item bg-color="#fffffF" title="身份证号"
					:value="accountData.accountIdCard.substring(0,1)+'****************'+accountData.accountIdCard.substring(accountData.accountIdCard.length - 1)"
					:arrow="false"></u-cell-item>
			</view>
			<u-cell-item title="银行卡位持卡本人银行卡" :arrow="false" bg-color="#F6F6F6" :border-bottom="false"></u-cell-item>
		</u-cell-group>
		<view class="settle__upload">
			<DeliverFileUpload :maxCount="1" :width="700" @success="onSuccess" @remove="onRemove"></DeliverFileUpload>
			<view class="tip">
				个人储蓄卡正面
			</view>
		</view>

		<u-form ref="uForm" class="settle__form">

			<!-- <u-upload :action="action" :file-list="fileList"></u-upload> -->
			<u-form-item label="银行卡号" label-width="200rpx" class="" bg-color="white">
				<u-input v-model="form.accountNo" type="number" placeholder="请输入银行卡号" />

			</u-form-item>
			<u-form-item label="开户行" label-width="200rpx" class="">
				<u-input v-model="form.bankName" type="select" placeholder="请选择开户行" @click="goBank()" />

			</u-form-item>
			<u-form-item label="开户城市" label-width="200rpx" class="">
				<u-input v-model="city" type="select" placeholder="请选择开户城市" @click="showCity = true" />

				<u-select v-model="showCity" mode="mutil-column-auto" :list="cityList" @confirm="confirm"></u-select>


			</u-form-item>
			<u-form-item label="开户支行" label-width="200rpx" class="">
				<u-input v-model="form.branchName" type="select" placeholder="请选择开户支行" @click="goBankBranch()" />
				<u-picker v-model="showSubBank" mode="region"></u-picker>
			</u-form-item>
			<u-form-item label="手机号" label-width="200rpx" class=""><u-input v-model="form.accountMobileNo"
					placeholder="银行预留手机号" /></u-form-item>
		</u-form>


		<u-button type="primary" :custom-style="customStyle" @click="submit()">提交</u-button>
	</view>
</template>

<script>
	import DeliverFileUpload from "@/components/DeliverFileUpload/DeliverFileUpload.vue";
	export default {
		components: {
			DeliverFileUpload,

		},
		data() {
			return {
				accountData: {},
				customStyle: {
					// 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: '#9D60FF',
					margin: '20rpx'
				},

				showBank: false,
				showCity: false,
				showSubBank: false,
				form: {
					accountImg: "",
					accountNo: "",
					accountName: "",
					bankName: "",
					bankCode: "",
					accountProvince: "",
					accountCity: "",
					accountArea: "",
					branchName: "",
					cnapsNo: "", //branchCode
					accountMobileNo: "",
				},
				cityList: [],
				city: "",

				fileList: [],
				ocrParam: {
					"path": "",
					"ocrType": "BANK_CARD"
				}
			}
		},

		mounted() {
			this.querySetter();
			this.getCity();
		},
		methods: {
			onRemove(index) {
				this.fileList.splice(index, 1);
				this.form.accountImg = "";
				this.form.accountNo = "";
			},
			onSuccess(filePath) {

				this.fileList.push(filePath);

				//ocr识别
				this.getOcrRead(filePath);
			},
			getOcrRead(filePath) {
				const _that = this;
				_that.ocrParam.path = filePath;
				this.$zx.common_api.getOCRRead(this.ocrParam).then((data) => {

					console.log("data=" + JSON.stringify(data.result))
					if (data.result) {
						_that.form.accountNo = data.result.bank_card_number.replace(/\s+/g, '');
					}
				});
			},
			querySetter() {
				const _that = this;
				this.$zx.user_api.querySetter().then((data) => {

					console.log("data=" + JSON.stringify(data))
					this.accountData = data;
					this.form.accountName = this.accountData.accountName;
				});
			},

			goBank() {
				const _that = this;
				uni.navigateTo({
					url: "/pages/bank/bankSelect",
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: (data) => {
							console.log("data=" + JSON.stringify(data))

							_that.form.bankName = data.data.name;
							_that.form.bankCode = data.data.code;
						},
					},
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							data: 'data from starter page'
						})
					}


				});
			},
			goBankBranch() {
				const _that = this;

				if (!_that.form.bankCode) {
					uni.$zx.msg("请先选择开户行", {
						duration: 4000,
					});
					return;
				}
				if (!_that.form.accountProvince) {
					uni.$zx.msg("请先选择开户城市", {
						duration: 4000,
					});
					return;
				}
				uni.navigateTo({
					url: "/pages/bank/bankBranchSelect?province=" + _that.form.accountProvince + "&city=" + _that
						.form.accountCity + "&bankCode=" + _that.form.bankCode,

					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: (data) => {
							console.log("data=" + JSON.stringify(data))

							_that.form.branchName = data.data.name;
							_that.form.cnapsNo = data.data.code;
						},
					},
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							data: 'data from starter page'
						})
					}


				});
			},
			getCity() {
				const _that = this;
				_that.$zx.common_api.listProvinceCityArea().then((data) => {

					// console.log("data=" + JSON.stringify(data))
					_that.cityList = data;
					_that.cityList.forEach(function(item, index_1, array) {

						_that.$set(item, 'value', item.code);
						_that.$set(item, 'label', item.name);

						if (item.hasChildren) {
							item.children.forEach(function(city, index_2, array) {

								_that.$set(city, 'value', city.code);
								_that.$set(city, 'label', city.name);
								if (city.hasChildren) {
									city.children.forEach(function(distinct, index_3, array) {

										_that.$set(distinct, 'value', distinct.code);
										_that.$set(distinct, 'label', distinct.name);
									});
								}
							});
						}

					});

				});
			},
			confirm(e) {
				let city = ""
				const _that = this;
				e.forEach(function(item, index, array) {

					city += item.label + ' ';
					if (index == 0) {
						_that.form.accountProvince = item.value;
					} else if (index == 1) {
						_that.form.accountCity = item.value;
					} else {
						_that.form.accountArea = item.value;
					}
				});
				this.city = city;
			},
			submit() {
				const _that = this;
				console.log("form=" + JSON.stringify(this.form))
				if (_that.fileList.length == 0) {
					uni.$zx.msg("请上传银行照片", {
						duration: 4000,
					});
					return;
				}
				if (!_that.form.accountNo) {
					uni.$zx.msg("请输入银行卡号", {
						duration: 4000,
					});
					return;
				}
				if (!_that.form.bankCode) {
					uni.$zx.msg("请选择开户行", {
						duration: 4000,
					});
					return;
				}
				if (!_that.form.accountProvince) {
					uni.$zx.msg("请选择开户城市", {
						duration: 4000,
					});
					return;
				}
				if (!_that.form.branchName) {
					uni.$zx.msg("请选择开户支行", {
						duration: 4000,
					});
					return;
				}
				if (!_that.form.accountMobileNo) {
					uni.$zx.msg("请输入银行预留手机号", {
						duration: 4000,
					});
					return;
				}

				this.$zx.user_api.updateSetter(_that.form).then((data) => {



					const eventChannel = this.getOpenerEventChannel();
					// 通过监听上个页面的uni.navigateTo的events中定义的事件传递参数
					eventChannel.emit('acceptDataFromOpenedPage', {
						data: "1"
					});
					// 关闭当前页返回上一页并触发acceptDataFromOpenedPage事件
					uni.navigateBack({
						delta: 1
					});
				});
			}
		},

	}
</script>

<style scoped lang="scss">
	.settle {
		&__form {
			background-color: white;
		}

		&__upload {
			background-color: white;
			padding: 20rpx;
		}
	}

	.tip {
		text-align: center;
	}

	.settle__form {
		background-color: white;
	}
</style>